<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
    <!--不输入内容-->
    <component1></component1>
    <!--输入文本-->
    <component1>输入的内容</component1>
    <!--输入html-->
    <component1><div><a href="https://www.baidu.com/">百度一下，你就知道</a></div></component1>
    <!--输入其他组件-->
    <component1><component2/></component1>

    <!--输入的内容，<slot></slot>会替换成输入的内容 -->
</div>

<!--组件里定义一个元素slot（可以有后备内容，就是默认值）
slot元素内容，可以有后备内容，就是默认值，当输入内容为空的，可以显示后备内容，如果有输入内容就会slot替换成输入内容，后备内容就不会显示
-->
<template id="component1">
    <div>
        <h2>组件1</h2>
        <slot>默认值</slot>
    </div>
</template>
<template id="component2">
    <div style="background-color: #c2d5d5">
        <h2>组件2</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 有一些组件是一些通用的布局模板，每个展示的内容都不是固定，这时候就可以使用Vue提供的插槽功能
     * 插槽的功能就是把组件的<slot>元素替换成传入的内容，内容可以是：文本，html，其他组件
     */
    const app = new Vue({
        el: '#app',
        components: {
            'component1': {
                template: "#component1"
            },
            'component2': {
                template: "#component2"
            }
        }
    })

</script>
</html>